<template>
  <div>
    <int :info="info"></int>
    <div class="cen">
      <Search @search="searchFn"></Search>
      <div class="content">
        <p>
          当前共<span>{{ count }}</span
          >个结果
        </p>
        <div>
          <el-row>
            <el-col
              :span="5"
              v-for="(item, index) in disList"
              :key="item.id"
              :class="(index + 1) % 4 == 0 ? 'disitem ri-mar' : 'disitem'"
              @click.native="videoDetail(item.id)"
            >
              <div
                class="imgbox"
                @mouseenter="enteritem"
                @mouseleave="leaveitem"
              >
                <video
                  class="video"
                  :src="item.url"
                  style="width: 250px"
                  @canplay="getVidDur(index)"
                ></video>
                <i class="iconfont icon-24gf-playCircle"></i>
                <el-col :span="24" class="timewi">{{ item.duration }}</el-col>
              </div>
              <h1>{{ item.title }}</h1>
              <div class="label">
                <span
                  v-for="(item2, index2) in item.label"
                  :key="item2"
                  :class="colorArr[index2 % 4]"
                  >{{ item2 }}</span
                >
              </div>
              <el-row> </el-row>
              <el-row class="bot">
                <el-col :span="20" class="cont">{{item.time}}</el-col>
                <el-col
                  :span="4"
                  class="icon"
                  @click.native.stop="collection(item)"
                >
                  <i
                    v-show="!item.isCollection"
                    class="iconfont icon-shoucang"
                  ></i>
                  <i
                    v-show="item.isCollection"
                    class="iconfont icon-shoucang1"
                  ></i>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          class="fenye"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
      <el-row class="centop">
        <el-col :span="4">
          <span class="acspan">经验推荐</span>
        </el-col>
        <el-col :span="3" :offset="17"> </el-col>
      </el-row>
      <div class="exp">
        <Exprec></Exprec>
      </div>
    </div>
  </div>
</template>

<script>
//获得视频时长
let videofn = (i) => {
  var video = document.getElementsByClassName("video")[i];
  let duration = video.duration;
  let h = parseInt((duration / 60 / 60) % 24);
  h = h < 10 ? "0" + h : h;
  let m = parseInt((duration / 60) % 60);
  m = m < 10 ? "0" + m : m;
  let s = parseInt(duration % 60);
  s = s < 10 ? "0" + s : s;
  return h + ":" + m + ":" + s;
};
import Int from "../components/Int.vue";
import Search from "./../components/searchandlist.vue";
import Exprec from "../components/Exprec.vue";
export default {
  components: {
    Int,
    Search,
    Exprec,
  },
  data() {
    return {
      colorArr: ["bi-bg", "yi-bg", "ri-bg", "gi-bg"],
      info: {
        name: "疾病视频",
        enName: "Disease video",
        text: "将疾病介绍繁琐的文字可视化，通过视频来更加准确了解疾病信息。",
        enText:
          "Visualize the cumbersome text of disease introduction, and more accurately understand the disease information through ",
        img: require("../assets/s1.png"),
      },
      disList: [
        {
          id: 1,
          name: "高血压的危害",
          img: "http://5b0988e595225.cdn.sohucs.com/images/20181030/04c9a600df8d4771839c37e69a38b8e9.jpeg",
          label: ["内科", "心血管内科", "胸部"],
          cont: "临床以发作性中重度、搏动样头痛为主要表现，一般持续4～72小时，可伴有恶心、呕吐，光...",
          isLike: false,
        },
      ],
      count: 0,
      classifyId: null, //搜索类别id
      title: null, //搜索内容
    };
  },
  created() {
    this.$axios({
      method: "get",
      url: "/video/selectAll",
      params: {
        page: 1,
        size: 8,
      },
    }).then((res) => {
      console.log(res);
      if (res.code != "200") {
        this.$message.error(res.msg);
      } else if (res.code == "200") {
        this.disList = res.data.map((item) => ({ ...item, duration: "00:00" }));
        this.count = res.count;
      }
    });
  },
  methods: {
    enteritem(e) {
      e.target.childNodes[1].style.display = "block";
    },
    leaveitem(e) {
      e.target.childNodes[1].style.display = "none";
    },
    videoDetail(id) {
      this.$router.push({ path: "/main/videodetail", query: { id: id } });
    },
    getVidDur(i) {
      let s = videofn(i);
      this.disList = this.disList.map((item, index) => {
        if (index == i) {
          item.duration = s;
        }
        return item;
      });
    },
    //改变页数
    changePage(page) {
      this.$axios({
        url: "/video/selectAll",
        method: "get",
        params: {
          page: page,
          size: 8,
          title: this.title,
          classifyId: this.classifyId,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.disList = res.data.map((item) => ({
            ...item,
            duration: "00:00",
          }));
          this.count = res.count;
        }
      });
    },
    //搜索,type=2是为按类别查询
    searchFn(con, type, sea, id) {
      if (type == 2) {
        this.classifyId = id;
        this.title = sea;
      } else {
        this.title = con;
      }
      this.$axios({
        url: "/video/selectAll",
        method: "get",
        params: {
          page: 1,
          size: 8,
           title: this.title,
          classifyId: this.classifyId,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.disList = res.data.map((item) => ({
            ...item,
            duration: "00:00",
          }));
          this.count = res.count;
        }
      });
    },
    //收藏
    collection(data) {
      console.log(data);
      let allData = {
        targetId: data.id,
        status: data.isCollection == false ? 1 : -1,
        type: 2,
      };
      this.$store.dispatch("collection", allData).then((res) => {
        this.disList.forEach((item) => {
          if (item.id == data.id) {
            item.isCollection = !item.isCollection;
          }
        });
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.exp {
  width: 1200px;
}
.cen {
  background-color: #f2f7fb;
  overflow: hidden;
  & > div {
    width: 1200px;

    margin: 30px auto;
  }
}
.content {
  p {
    text-align: left;
    margin: 20px 0;
    color: #9ba5bb;
    & > span {
      font-size: 18px;
      color: #312a6d;
    }
  }
  .ri-mar {
    margin-right: 0px !important;
  }
  .disitem {
    cursor: pointer;
    background-color: #fff;
    box-shadow: 2px 3px 10px 5px rgba(150, 150, 150, 0.2);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: 280px;
    text-align: left;
    width: 270px;
    margin-right: 35px;
    position: relative;
    margin-bottom: 20px;
    transition: all 0.2s;
    & > div:first-child {
      width: 100%;
      border-radius: 5px;
      height: 150px;
      overflow: hidden;
      position: relative;
      & > img {
        width: 100%;
      }
      i {
        position: absolute;
        top: 50px;
        right: 100px;
        font-size: 70px;
        color: rgba(250, 250, 250, 0.7);
        display: none;
      }
    }
    h1 {
      font-weight: 400;
      font-size: 23px;
    }
    .timewi {
      font-size: 14px;
      margin-top: 10px;
      color: #fff;
      background-color: rgba(50, 50, 50, 0.7);
      position: absolute;
      bottom: 15px;
      width: 70px;
      right: 5px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 3px;
    }
    .label > span {
      background-color: #9ba5bb;
      color: white;
      font-size: 8px;
      border-radius: 5px;
      padding: 2px;
      margin: 5px 2px;
      text-align: left;
    }
    .bot {
      position: absolute;
      bottom: 5px;
      width: 100%;
      .cont {
        font-size: 12px;
        width: 100%;
        margin-bottom: 10px;
        color: #9ba5bb;
      }
      .icon {
        position: absolute;
        bottom: 5px;
        right: 10px;
        & > i {
          font-size: 30px;
          color: #fcc64a;
        }
      }
    }
    &:hover {
      transform: translateY(-6px);
      h1 {
        color: #1890ff;
      }
    }
  }
  .fenye {
    transform: scale(1.2);
    margin-top: 25px;
  }
}
</style>
